<template>
	<view class="layout-page-box page-bg" :style="props.customStyle">
		<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :placeholder="props.placeholder"
			:mode="props.mode" :title="props.title" :titleColor="props.titleColor"
			:handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
		<view class="layout-page-content" :style="{ ...props.contentStyle }">
			<slot></slot>
		</view>
		<template v-if="props.showLoginModalDom">
			<coreshop-login-modal :show="_useLoginStore.showLoginModalTogglePop"
				@handleChangePopup="handleChangeLoginPopup"
				@getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
		</template>
	</view>
</template>
<script setup lang="ts">
	import { useLoginStore } from '@/core/store';

	const _useLoginStore = useLoginStore();

	const props = withDefaults(defineProps<{
		isBack ?: boolean,
		bgColor ?: string,
		titleColor ?: string,
		mode ?: "left" | "center",
		title ?: string,
		isShowStatusBarHeight ?: boolean;
		customStyle ?: any;
		contentStyle ?: any;
		handleCustomRouteJump ?: () => void,
		showLoginModalDom ?: boolean;
		placeholder ?: boolean;

	}>(), {
		isBack: true,
		bgColor: '#eef2f6',
		titleColor: '#000',
		mode: 'center',
		title: '',
		isShowStatusBarHeight: true,
		customStyle: {},
		contentStyle: {},
		showLoginModalDom: false,
		placeholder: true,
	});

	/** 打开获取关闭login弹框 */
	const handleChangeLoginPopup = (isShow : boolean) => {
		_useLoginStore.setShowLoginModalTogglePop(isShow);
	}
</script>
<style lang="scss" scoped>
</style>